<template>
  <div class="parent">
    <div class="login">
      <div class="title">后台管理模板</div>
      <div class="input-parent">
        <!--用户名称         -->
        <a-input v-model:value="user.userName" placeholder="账号" size="large" autosize="true" class="input1">
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>

        <!--密码-->
        <a-input-password v-model:value="user.passWord" password placeholder="密码" size="large" autosize="true" maxlength="8" class="input2">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>

        <!--验证码-->
        <a-input v-model:value="user.authCode" placeholder="验证码" size="large" autosize="true" maxlength="8" class="input3">
          <template #prefix>
            <CheckCircleOutlined />
          </template>
        </a-input>
        <a-checkbox v-model:checked="checked" class="checkbox">记住密码</a-checkbox>
        <a-button type="primary" class="logbut" size="middle" @click="login">登录</a-button>
      </div>


    </div>
  </div>
  <Footer style="margin-top: -46px"/>

</template>

<script setup>
import Footer from "@/components/Layout/Footer.vue";
import {ref} from "vue";

import router from "@/router/index.js";
import {UserOutlined,LockOutlined,CheckCircleOutlined}  from '@ant-design/icons-vue'
let user=ref({
  userName:'',
  passWord:'',
  authCode:''
})

const checked = ref(false);


function login(){
  router.push("/")
}
</script>

<style scoped>
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置父元素高度 */
  background: url("../../assets/login/login-background.f9f49138.jpg");
}

.login {
  border-radius: 6px;
  background: #fff;
  width: 450px;
  padding: 25px 25px 5px 25px;
  height: 380px;
}
.title{
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}
.input-parent{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-left: 25px;
}
.input1{
  width: 350px;
}
.input2{
  margin-top: 23px;
  width: 350px;
}
.input3{
  margin-top: 23px;
  width: 200px;
}
.logbut{
  width: 350px;
  margin-top: 30px;
}
.checkbox{
  padding-top: 22px;
}
</style>